<!-- components/SideNav.vue -->
<template>
  <nav class="side-nav">
    <ul>
      <li v-for="item in items" :key="item.type">
        <NuxtLink @click="$emit('select', item)" class="nav-item" :class="{ active: item.type === active }">
          {{ item.title }}
        </NuxtLink>
      </li>
    </ul>
  </nav>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true,
    validator: items => items.every(i =>
      'type' in i && 'title' in i && 'path' in i
    )
  },
  active: String
})
</script>

<style lang="scss" scoped>
@use '@/assets/scss/main' as *;

.side-nav {
  --gov-border-color: #f6f6f6;
  --gov-text-color: #333;
  --hover-color: rgba(24, 103, 202, 0.4);

  // margin-top: 1rem;
  ul {
    li {
      list-style-type: none; //去掉小黑点
      border-bottom: 1px solid var(--gov-border-color);
      cursor: pointer;
    }
  }

  .nav-item {
    display: block;
    padding: 1rem 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
    border-radius: 4px;
    text-align: center;
    position: relative;
    color: var(--gov-text-color);
    font-size: 1.2rem;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 3.5rem;
      width: 8px;
      height: 8px;
      background: var(--gov-text-color);
    }

    &:hover {
      background: #D9EAFF;
    }

    &.active {
      // background: #1867CA;
      color: $myprimary-color;
      font-weight: 500;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 3.5rem;
        width: 8px;
        height: 8px;
        background: $myprimary-color;
      }
    }
  }

  @media screen and (max-width: 768px) {

    .nav-item {
      font-size: .9rem;

      &:before {
        width: 0;
        height: 0;
      }
      &.active {
        &:before {
          width: 0;
          height: 0;
        }
      }

    }
  }
}
</style>